<template>
  <div style="width: 100vw;overflow: hidden;height:6" @mousewheel="mousewheel">
      <div style="background:#ffffff;height:80px;position:absolute;top:0px;z-index:10;width:100%">
          <pagetop :active='"4"' style="" :logoPic="logoPic"></pagetop>
      </div>
    
    <div class="downLoadBox">
        <ul class="downPageAll" id="fullpage">
            
            <load-app v-for="(item,index) in loadArr" :key='index' :item="item" class="downPage" :version="version"></load-app>
        </ul>
        <ul id="indicator">
            <li  v-for="(item,index) in loadArr" :key='index' class="indicator" @click="changePage(index)"></li>
        </ul>
    </div>
  </div>
</template>

<script>
import pagetop from '../components/common/pageTop'
import loadApp from '../components/loadApp/index.vue'
import request from '@/request/index.js'
export default {
  name: 'download',
  components: {
    pagetop,
    loadApp
  },
  data () {
    return {
        loadArr:[
            {
                backgroundStyle: {
                    backgroundImage: "url(" + require("../images/officalPic/loadbg1.png") + ")",
                    backgroundPosition:'center center',
                    backgroundSize:'1920px 1020px',
                },
                title:'精准推荐',
                color:'#FFAE89',
                tip:'专属推荐，精准定位',
                pic:require("../images/officalPic/phone1.png")
            },
            {
                backgroundStyle: {
                    backgroundImage: "url(" + require("../images/officalPic/loadbg2.png") + ")",
                    backgroundPosition:'center center',
                    backgroundSize:'1920px 1020px',
                },

                title:'发现',
                color:'#54BBE5',
                tip:'发现好友，不容错过',
                pic:require("../images/officalPic/phone2.png"),
            },
            {
                backgroundStyle: {
                    backgroundImage: "url(" + require("../images/officalPic/loadbg3.png") + ")",
                    backgroundPosition:'center center',
                    backgroundSize:'1920px 1020px',
                },

                title:'关注',
                color:'#FF8F8F',
                tip:'关注点滴，共享生活',
                pic:require("../images/officalPic/phone3.png")
            },
            {
                backgroundStyle: {
                    backgroundImage: "url(" + require("../images/officalPic/loadbg4.png") + ")",
                    backgroundPosition:'center center',
                    backgroundSize:'1920px 1020px',
                },

                title:'商城',
                color:'#FF74CC',
                tip:'精选好品，深度折扣',
                pic:require("../images/officalPic/phone4.png")
            }
        ],
        wheel:0,
        pageindex:0,
        version:'',
        logoPic:"",
    }
  },
  methods:{
      mousewheel:function(e){
          var e=e||window.event;
          console.log(e.deltaY);
          if(e.deltaY>0){
            this.wheel++;
            var that=this;
            if(this.wheel>3){
                that.wheel=0;
                if(that.pageindex+1<document.getElementsByClassName('indicator').length){
                    document.getElementsByClassName('indicator')[that.pageindex+1].click();
                }
                
            }
          }else if(e.deltaY<0){
                this.wheel--;
                var that=this;
                if(this.wheel<-3){
                    that.wheel=0;
                    if(that.pageindex+1>0){
                        document.getElementsByClassName('indicator')[that.pageindex-1].click();
                    }
                    
                } 
          }
          
      },
      changePage:function(i){
          var indicator=document.getElementsByClassName('indicator');
          var indicaLength=document.getElementsByClassName('downPage')[0].offsetHeight;
          console.log(indicaLength);
          var that=this;
          for(var j=0;j<indicator.length;j++){
              indicator[j].style.background="transparent";
              if(i==j){
                  indicator[i].style.background="#ffffff";
                  document.getElementsByClassName('downPageAll')[0].style.top=-i*indicaLength+80+'px';
                  that.pageindex=i
              }
          }
      }
  },
  created () {
        request.getVersion(this);
        request.home(this);
        this.loading=this.$loading({
      lock: true,
      // text: 'Loading',
      // spinner: 'el-icon-loading',
      background: 'rgba(255, 255, 255, 0.6)',
      target: document.querySelector('body'),
      
    });

  }
}
</script>

<style scoped lang="scss">
#indicator{
    position: absolute;
    top:400px;
    right:20px;
    width:auto;
    height:auto; 
    .indicator{
        height:16px;
        width:16px;
        border-radius: 8px;
        border:1px solid #ffffff;
        margin-top: 20px;
        cursor: pointer;
    }
    .indicator:first-child{
       background: #ffffff
    }
    .indicatorActive{
        background:#ffffff;
    }
}
.downPageAll{
    position:absolute;
}
  .downLoadBox{
      width:100vw;
      height:100vh;
      position:absolute;
      overflow: hidden;
      top:0px;
      padding-top: 60px;
      box-sizing: border-box;
        // overflow: hidden;
        ul{
            height:400%;
            width:100%;
            li{
                height:25%;
                width:100%;
            }
        }
  }
</style>
